<script setup lang="ts">
defineOptions({
    name: 'BiSkeleton'
})

interface Props {
    skeletonType?: string // 骨架屏类型
}

const props = withDefaults(defineProps<Props>(), {
    skeletonType: 'normal' // 默认 normal 可选 signin, exchange
})

</script>
<template>
    <div class="skeleton" v-if="props.skeletonType === 'normal'">
        <div class="skeleton-icon"></div>
        <div class="skeleton-info">
            <div class="skeleton-info-title"></div>
            <div class="skeleton-info-title"></div>
        </div>
        <div class="skeleton-btn"></div>
    </div>

    <div class="skeleton-signin" v-if="props.skeletonType === 'signin'">
        <div class="skeleton-signin-list">

        </div>
        <div class="skeleton-signin-line"></div>
        <div class="skeleton-signin-line"></div>
        <div class="skeleton-signin-btn"></div>
    </div>

    <div class="skeleton-exchange" v-if="props.skeletonType === 'exchange'">
        <div class="skeleton-exchange-title"></div>
        <div class="skeleton-exchange-logo"></div>
        <div class="skeleton-exchange-btn"></div>
    </div>
</template>
<style scoped lang="scss">
@mixin keyframes {
    animation-name: skeleton;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
}

.skeleton-exchange {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    background-color: var(--main-color);
    border-radius: 3vmin;

    &-title {
        width: 30%;
        height: 5vmin;
        background-color: var(--simple-color);
        border-radius: 1vmin;
        @include keyframes;
    }

    &-logo {
        width: 18vmin;
        height: 18vmin;
        background-color: var(--simple-color);
        border-radius: 1vmin;
        @include keyframes;
    }

    &-btn {
        width: 75%;
        height: 9vmin;
        background-color: var(--simple-color);
        border-radius: 1vmin;
        @include keyframes;
    }
}

.skeleton-signin {
    width: 100%;
    background-color: var(--main-color);
    padding: 2vmin 3vmin;
    border-radius: 3vmin;

    &-list {
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        height: 12vmin;
        background-color: var(--simple-color);
        margin-bottom: 1vmin;
        border-radius: 0.5rem;
        @include keyframes;
    }

    &-line {
        width: 100%;
        height: 2.5vmin;
        background-color: var(--simple-color);
        @include keyframes;
        margin-bottom: 1vmin;
        border-radius: 0.5rem;
    }

    &-btn {
        height: 7vmin;
        width: 40%;
        margin: 2vmin auto;
        background-color: var(--simple-color);
        border-radius: 10vmin;
        @include keyframes;
    }
}

.skeleton {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 20vmin;
    background-color: var(--main-color);
    border-radius: 3vmin;
    padding: 2vmin 3vmin;

    &-icon {
        --size: 10vmin;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background-color: var(--simple-color);
        @include keyframes;
    }

    &-info {
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: space-evenly;

        &-title {
            margin-left: 3.5vmin;
            width: 50vmin;
            height: 2vmin;
            background-color: var(--simple-color);
            border-radius: .5vmin;
            @include keyframes;

        }
    }

    &-btn {
        position: absolute;
        top: 50%;
        right: 3vmin;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20vmin;
        height: 8vmin;
        background-color: var(--simple-color);
        border-radius: 10vmin;
        @include keyframes;
    }

}

@keyframes skeleton {
    0% {
        background-color: var(--simple-color);
    }

    100% {
        background-color: rgba(239, 238, 252, 0.589);
    }
}
</style>